<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>dragLayout 两边拖拽</title>
	<link rel="stylesheet" type="text/css" href="css/dragLayout.css" media="all" />
	<style type="text/css">
		#left{
			width:200px;
			height:100%;
			border: 1px solid #167c52;
			float: left;
		}
		#center{
			width: calc(100% - 500px);
			height: 100%;
			float: left;
		}
		#right{
			width:300px;
			height:100%;
			border:1px solid #00f;height:100%;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="left"></div>
		<div id="center">
		  <div style="width:100%;height:100%;border:1px solid red;">例子演示</div>
		</div>
		<div id="right"></div>
	</div>
	
	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="js/dragLayout.js"></script>
	<script type="text/javascript">
	
		var obj = $.dragLayout({
				container: $("#main"),
				leftMenuWidth:200,
				rightMenuWidth:300,
				speed:0.8,
				dragBarWidth:5
			});
					
	</script>
</body>
</html>